import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { Modal, Form, message, Table, Button } from 'antd';
import { ModalForm } from '../../../components'
import { fetchData } from '../../../components/AjaxConsumer'
import QueryOpen from './QueryOpen'
import Actions from './ActionStore/Actions'
import styles from './closs.scss'

export default class OpenPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            loadingJD: false,
            visible: false,
            dataSource: null,
            pagination: {pageSize:80,current:1},
            selectedRowKeys: [],
            selectedRowCount: 0
        };
        //reflux中的监听
        this.unsubscribe = Actions.searchConditionOpen.listen( (values) => {
            //将query中的查询条件放到this.par中
            this.values = values
            //并且触发查询
            this.getTableData({pageSize:'80',current:'1',...values})
        });
        this.columns = [
            {
                title: '条码',
                dataIndex: 'barcode',
                width: '25%',
             //   sorter:(a,b)=>a.proBarcode.substr(a.proBarcode.length-2)-b.proBarcode.substr(a.proBarcode.length-2),
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '库位',
                dataIndex: 'wlCode',
                width: '10%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '库存状态',
                dataIndex: 'barcodeStatus',
                width: '10%',
                render: (text, record, index) => this.renderColumns(text),
            }, {
                title: '合同编号',
                dataIndex: 'contractNo',
                width: '15%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, 
            // {
            //     title: '采购订单号',
            //     dataIndex: 'purchaseNo',
            //     width: '14%',
            //     render(text){
            //         return <span title={text}>{text}</span>
            //       }
            // }, 
            {
                title: '入库时间',
                dataIndex: 'gmtCreate',
                width: '16%',
                render(text){
                    return <span title={text}>{text}</span>
                  }
            }, {
                title: '型号',
                dataIndex: 'model',
                width: '8%'
            }, {
                title: '长度',
                dataIndex: 'amount',
                width: '8%'
            }
            // ,{
            //     title: '库龄',
            //     dataIndex: 'proInDateToNowDays',
            //     width: '8%'
            // }
        ];
    }
    //ajax函数
    getTableData = (values) => {
        let value = {
            wlCode: this.state.wlCode,
            contractNo: this.state.contractNo,
            model: this.state.model,
            modelType: this.state.modelType,
            barcodeStatus: this.state.barcodeStatus,
            ...values
        };
        //查询时重置选项
        this.setState({
            selectedRowCount:0,
            selectedRowKeys:[]
        })
        //查询条件整理
        const options = {
            url: '/product/insidewarehouse/storagesn/r/detail',
            type: 'get',
            condition: {
                ...value
            }
        };
        //发起请求
        fetchData(this, options, (res) => {
            //回调函数
            const pagination = { ...this.state.pagination };
            pagination.total = res.data.length;
            console.log(pagination.current+"---------"+ res.data.length +"-----------"+pagination.pageSize);
            this.setState({
                loading: false,
                dataSource: res.data,
                pagination,
            });
        })
    }
    renderColumns(text) {
        if(text == '0'){
            return (<span>可用</span>);
        }else if(text == '1'){
            return (<span>冻结</span>);
        }else if(text == '2'){
            return (<span>已出库</span>);
        }else if(text == '3'){
            return (<span>抽检冻结</span>);
        }
    }

    componentDidMount(){
        this.setState({
            selectedRowKeys:[],
            dataSource:null,
            selectedRows: null
        });
    }

    // 组件参数实例化-仅一次
    componentWillMount(){
        this.setState({
            selectedRowKeys:[],
            dataSource:null,
            selectedRows: null
        });
    }

    renderColumns1(text) {
        if(text == '2'){
            return (<span>质量冻结</span>);
        }else if(text == '4'){
            return (<span>手工冻结</span>);
        }
    }

    // 修改属性后刷新-n次
    componentWillReceiveProps(nextProps){
        if(nextProps.init){

        }
        let tmpFormData = nextProps.formData;
        let url = nextProps.submitUrl;

            this.setState({
                selectedRowKeys:[],
                selectedRows: null
            });
    }

    //显示弹框
    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    // 隐藏弹出框
    hideModal = () => {
        this.setState({
            visible: false,
        });
    }

    handleOk = () => {
        this.setState({
            visible: false,
            selectedRowKeys: [],
            selectedRows: null,
            selectedRowCount:0
        });
        this.refreshHandle();
    }

    handleCancel = () => {
        this.setState({
            visible: false,
            selectedRowKeys: [],
            selectedRows: null,
            selectedRowCount:0
        });
    }
    //刷新List列表
    refreshHandle = () => {
        console.log("刷新List列表")
        this.props.refreshHandle();
    }
    // (外部调用)
    editHandle  = (resData, RawStorageId,wlCode,contractNo,model,modelType,barcodeStatus) => {
        console.log("RawStorageId:****************" + RawStorageId);
        this.state.selectedRowKeys = null;
        this.setState({
            visible: true,
            formTitle: '成品条码解冻',
            dataSource: resData.data,
            RawStorageId: RawStorageId,
            wlCode: wlCode,
            contractNo: contractNo,
            model: model,
            modelType: modelType,
            barcodeStatus: barcodeStatus,
            selectedRowKeys:[]
        });
        // 重置查询输入项
        this.refs.queryOpenOptions.resetFields();
    }
 
    submit = () => {
        const { selectedRowKeys } = this.state;
        if (selectedRowKeys.length > 0) {//判断选择时才能点击按钮
            this.setState({loadingJD: true});
            
            let pstData = [];
            for(let i = 0; i < selectedRowKeys.length; i++){
                let tmp = {};
                tmp.storageSnId = selectedRowKeys[i];
                tmp.RawStorageId = this.state.RawStorageId;
                tmp.barcodeStatus = '0';
                tmp.wlCode = this.state.wlCode;
                tmp.contractNo = this.state.contractNo;
                tmp.model = this.state.model;
                tmp.modelType = this.state.modelType;
                tmp.lockReason = null;
                console.log("tmp.RawStorageId:****************" + tmp.RawStorageId);
                pstData.push(tmp);
            }
            const options= {
                url: '/product/insidewarehouse/storagesn/lockAndunlock',
                type:'POST',
                contentType: 'application/json; charset=utf-8',
                condition:JSON.stringify(pstData),
            };
            fetchData(this, options, (resData)=>{
                //回调函数
                this.props.refreshHandle();
                 this.state.selectedRowKeys = null;
                this.setState(
                    {
                        selectedRowKeys: []
                    }
                    );
                if (resData.code == 1) {
                    message.success('操作成功');
                    setTimeout(() => {
                        this.setState({
                            loadingJD: false,
                            selectedRowCount:0,
                        })
                    }, 2000); //缓冲,防止连击
                    this.props.refreshHandle();
                    this.hideModal();
                }else{
                    this.setState({loadingJD: false});
            
                }
            },()=>{
                this.setState({loadingJD: false});                
            });
        }
        else {
            Modal.error({
                title: '错误提示',
                content: '请选择一条或者多条数据',
            });
        }
    }


    onSelectChange = (selectedRowKeys) => {  
        console.log('selectedRowKeys changed: ', selectedRowKeys);  
        this.setState({ 
            selectedRowKeys:selectedRowKeys,
            selectedRowCount:selectedRowKeys.length 
        });  
      }  
    render() {
        //表格复选框
        const { selectedRowKeys } = this.state; 
        
        const numberKey = this.state.dataSource;
        var numb = [];
        for(var i in numberKey){
           numb.push( numberKey[i].storageSnId)
        }

        const rowSelection = {
             selectedRowKeys,  
             onChange:this.onSelectChange,
             hideDefaultSelections:true,
             selections: [{
                key: 'all-data',
                text: '全选全部页条码',
                onSelect: () => {
                  this.setState({//
                    selectedRowKeys: numb, // 0...45
                    selectedRowCount: numb.length,
                  });
                },
              }],
              onSelection: this.onSelection, 
        };

        return(
            <Modal
                style={{top:'20px'}}
                visible={this.state.visible}
                title={this.state.formTitle ? this.state.formTitle : '填写表单'}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={'1000px'}
                footer=''
            >
            <QueryOpen ref="queryOpenOptions"/>
                {
                    <div style={{margin: '10px'}}>
                    <div style={{paddingBottom:'10px'}}>
                        <Button type="primary" onClick={this.submit} loading={this.state.loadingJD} >解冻</Button>
                        &nbsp;已选中: {this.state.selectedRowCount} 行
                    </div>
                        <Table rowSelection={rowSelection}
                               columns={this.columns}
                               dataSource={this.state.dataSource}
                               rowKey={row => row.storageSnId}
                               showHeader={true}
                               className={styles.checkTable}
                               pagination={{pageSize:'80'}}
                               size="small"
                               bordered 
                        />
                    </div>
                }

            </Modal>
        )
    }
}